---
import CodeStyleFigure from './CodeStyleFigure.astro'

interface Props {
  class: string
}

let { class: className, ...props } = Astro.props
---

<CodeStyleFigure class:list={className} title="Output" {...props}>
  <svg viewBox="0 0 333 308" class="image">
    <rect
      fill="var(--color-content-brand)"
      width="101"
      height="10"
      y="48"
      rx="3"
      x="7"
    >
    </rect>
    <rect
      fill="var(--color-content-brand)"
      width="101"
      height="10"
      rx="3"
      x="7"
      y="8"
    >
    </rect>
    <rect
      fill="var(--color-content-brand)"
      width="101"
      height="10"
      x="225"
      rx="3"
      y="8"
    >
    </rect>
    <rect
      fill="var(--color-content-brand)"
      width="101"
      height="10"
      y="68"
      rx="3"
      x="7"
    >
    </rect>
    <rect
      fill="var(--color-content-tertiary)"
      height="10"
      width="39"
      x="117"
      y="68"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-brand)"
      width="101"
      height="10"
      y="28"
      rx="3"
      x="7"
    >
    </rect>
    <rect
      fill="var(--color-content-tertiary)"
      height="10"
      width="40"
      y="108"
      rx="3"
      x="7"
    >
    </rect>
    <rect
      fill="var(--color-content-brand)"
      height="10"
      width="58"
      y="128"
      x="37"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-tertiary)"
      width="100"
      height="10"
      y="208"
      x="66"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-brand)"
      height="10"
      width="50"
      x="174"
      y="208"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-tertiary)"
      height="10"
      width="74"
      y="228"
      x="65"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-brand)"
      height="10"
      width="40"
      x="147"
      y="228"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-tertiary)"
      height="10"
      width="42"
      y="168"
      x="66"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-brand)"
      width="170"
      height="10"
      x="116"
      y="168"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-tertiary)"
      height="10"
      width="51"
      y="248"
      x="66"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-brand)"
      height="10"
      width="25"
      x="125"
      y="248"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-tertiary)"
      height="10"
      width="94"
      y="188"
      x="66"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-brand)"
      height="10"
      width="80"
      x="168"
      y="188"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-tertiary)"
      height="10"
      width="66"
      y="148"
      x="66"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-tertiary)"
      height="10"
      width="42"
      y="268"
      x="66"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-brand)"
      width="186"
      height="10"
      x="140"
      y="148"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-brand)"
      height="10"
      width="40"
      y="108"
      x="57"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-brand)"
      height="10"
      width="66"
      y="108"
      x="55"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-tertiary)"
      height="10"
      width="20"
      x="129"
      y="108"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-tertiary)"
      height="10"
      width="20"
      y="288"
      rx="3"
      x="7"
    >
    </rect>
    <rect
      fill="var(--color-content-brand)"
      height="10"
      width="70"
      x="214"
      y="28"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-tertiary)"
      height="10"
      width="52"
      x="116"
      y="48"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-brand)"
      height="10"
      width="52"
      x="176"
      y="48"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-tertiary)"
      height="10"
      width="90"
      x="116"
      y="28"
      rx="3"
    >
    </rect>
    <rect
      fill="var(--color-content-tertiary)"
      width="101"
      height="10"
      x="116"
      rx="3"
      y="8"
    >
    </rect>
  </svg>
</CodeStyleFigure>

<style>
  .image {
    block-size: 100%;
    opacity: 80%;
  }
</style>
